<template>
  <div id="effective">
    <div class="tables">
      <el-table
        :data="tableData"
        class="table"
        height="100%"
        ref="jdjgTable"
        @sort-change="sortChange"
        :header-cell-style="{
          padding: '0px',
          background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
        }"
        :row-class-name="tabRowClassName"
        header-row-class-name="mapTable_th"
      >
        <el-table-column width="60" align="center" type="index" :index="addIndex" label="序号">
          <el-table-column width="60" align="center" type="index" label="检索"> </el-table-column>
        </el-table-column>
        <el-table-column label="合同编号" align="center">
          <el-table-column align="center" sortable="custom" prop="contractNo" width="150">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-select v-model.trim="searchQrcoUsed" placeholder="请选择" @change="getDataChange">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option label="已使用" :value="1"></el-option>
                  <el-option label="未使用" :value="2"></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="招标内容" align="center">
          <el-table-column align="center" sortable="custom" prop="biddingContent" width="150">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-select v-model.trim="searchQrcoUsed" placeholder="请选择" @change="getDataChange">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option label="已使用" :value="1"></el-option>
                  <el-option label="未使用" :value="2"></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="供应商名称" align="center">
          <el-table-column align="center" sortable="custom" prop="providerName" width="150">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-select v-model.trim="searchQrcoUsed" placeholder="请选择" @change="getDataChange">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option label="已使用" :value="1"></el-option>
                  <el-option label="未使用" :value="2"></el-option>
                </el-select>
              </div>
            </template>
            <template slot-scope="scope">
              <el-button type="text" class="xg czBtn" size="small" @click="checkCompony(scope.row)">
                {{ scope.row.providerName }}
              </el-button>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="合同金额(元)" align="center">
          <el-table-column align="center" prop="contractAmount" width="150"> </el-table-column>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <el-table-column align="center" sortable="custom" prop="stateDescription" width="150">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="生效时间" align="center">
          <el-table-column align="center" sortable="custom" prop="takeEffectDate" width="180">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" align="center" width="320" fixed="right">
          <el-table-column align="center" width="320">
            <template slot-scope="scope">
              <div class="" v-if="scope.row.operate === 1">
                <el-button type="text" class="xg czBtn" size="small" @click="handleClick('查看', scope.row)">
                  查看
                </el-button>
              </div>
              <div class="" v-if="scope.row.operate === 2">
                <el-button type="text" class="xg czBtn" size="small" @click="handleClick('查看', scope.row)">
                  查看
                </el-button>
                <el-button
                  type="text"
                  class="xg czBtn"
                  size="small"
                  @click="handleClick('评价', scope.row)"
                  v-if="enterpriseType != 2"
                >
                  评价
                </el-button>
                <el-button type="text" class="ty czBtn" size="small" @click="handleClick('申请变更/取消', scope.row)">
                  申请变更/取消
                </el-button>
                <el-button type="text" class="xg czBtn" size="small" @click="handleClick('申请完成', scope.row)">
                  申请完成
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="pags">
      <element-pagination @getData="getPagChange" :Total="total"> </element-pagination>
    </div>
    <el-dialog
      width="1200px"
      :center="true"
      title="申请完成合同"
      v-if="conVisible"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="conVisible"
    >
      <h1>合同摘要</h1>
      <el-form label-width="130px" class="commonFrom">
        <el-form-item label="招标编号：" style="margin-bottom: 3px">
          {{ contractObj.biddingNo }}
        </el-form-item>
        <el-form-item label="合同编号：" style="margin-bottom: 3px">
          {{ contractObj.contractNo }}
        </el-form-item>
        <el-form-item label="定标说明：" style="margin-bottom: 17px; width: 100% !important">
          {{ contractObj.reviewMind }}</el-form-item
        >
      </el-form>
      <h1>基本信息</h1>
      <el-form class="commonFrom" label-width="130px">
        <el-form-item label="采购商名称："> {{ contractObj.enterpriseName }}</el-form-item>
        <el-form-item label="工程名称：" style="width: auto !important">
          <span>{{ contractObj.proName }}</span>
          <span style="color: #fa7355; cursor: pointer; margin-left: 10px" @click="checkProDetail(contractObj.proId)"
            >查看详情</span
          >
        </el-form-item>
        <el-form-item label="签约采购商：" class="form-item">
          <div>{{ contractObj.contractBuyer }}</div>
        </el-form-item>
        <el-form-item label="招标内容：" style="margin-right: 400px"> {{ contractObj.biddingContent }}</el-form-item>
        <el-form-item label="交付地点：" style="width: 100% !important">
          <div>
            {{ contractObj.province }}{{ contractObj.city }}{{ contractObj.area }}{{ contractObj.detailAddress }}
          </div>
        </el-form-item>
        <el-form-item label="合同形式：" style="width: 100% !important">
          <div>{{ contractObj.contractForm | contractFormFilter }}</div>
        </el-form-item>
      </el-form>
      <h1>总采购清单</h1>
      <div>
        <div style="margin: 20px 0">
          <p style="margin-bottom: 20px; margin-left: 60px">
            总合计：<span style="font-size: 24px; color: #333; margin-left: 12px">{{
              contractObj.contractAmount || 'xxxxx'
            }}</span
            >元
          </p>
          <p style="margin-left: 60px">
            已结算：<span style="font-size: 24px; color: #333; margin-left: 12spx">{{ endPrice }}</span
            >元
          </p>
        </div>
        <div class="bidding-table" style="margin-bottom: 20px">
          <el-table
            :data="biddListTotal"
            border
            class="bidding"
            ref="jdjgTable"
            :header-cell-style="cellStyle"
            :row-class-name="tabRowClassName"
          >
            <el-table-column width="60" align="center" type="index" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="材料名称" align="center" prop="materialName" width="160"> </el-table-column>
            <el-table-column label="规格型号" align="center" prop="model" width="160"> </el-table-column>
            <el-table-column label="单位" align="center" prop="company" width="80"> </el-table-column>
            <el-table-column label="参数指标" align="center" prop="parameterIndex" width="160"> </el-table-column>
            <el-table-column label="品牌产地" align="center" prop="brandOrigin" width="160"> </el-table-column>
            <el-table-column label="数量" align="center" prop="purchaseQuantity" width="120"> </el-table-column>
            <el-table-column label="已验收数量" align="center" prop="quantityReceived" width="180"> </el-table-column>
            <el-table-column label="单价" align="center" prop="unitPrice" width="120"> </el-table-column>
            <el-table-column label="税率(%)" align="center" prop="taxRate" width="80"> </el-table-column>
            <el-table-column label="不含税金额" align="center" prop="excludingTax" width="140"> </el-table-column>
            <el-table-column label="税金" align="center" prop="taxes" width="140"> </el-table-column>
            <el-table-column label="价税合计" align="center" prop="totalPrice" width="160" fixed="right">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <h1>合同履约保证金</h1>
      <el-form class="commonFrom" label-width="130px">
        <el-form-item label="保证金金额："> {{ contractObj.margin }}(万元) </el-form-item>
        <el-form-item label="保证金完成后退回金额：" label-width="170px">
          <el-input
            style="width: 180px"
            size="small"
            ref="performanceBond"
            placeholder="请输入金额"
            v-model.trim="marginPrice"
            @change="decimalChange($event, 'performanceBond')"
          >
            <p slot="suffix" style="color: #333">万元</p>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button size="small" class="commonBtn" @click="closeConDialog">取消</el-button>
        <el-button size="small" class="commonBtn1" @click="sureBtn">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width="553px"
      :center="true"
      title="工程详情"
      append-to-body
      class="pro_dialog"
      :close-on-click-modal="false"
      :visible.sync="projectVisible"
      v-if="projectVisible"
    >
      <el-form label-width="80px">
        <el-form-item label="工程编号: "> {{ projectFrom.proNo }}</el-form-item>
        <el-form-item label="工程名称: ">
          {{ projectFrom.proName }}
        </el-form-item>
        <el-form-item label="建设单位: ">
          {{ projectFrom.developmentUnit }}
        </el-form-item>
        <el-form-item label="施工单位: ">
          {{ projectFrom.constructUnit }}
        </el-form-item>
        <el-form-item label="监理单位: ">
          {{ projectFrom.constructControlUnit }}
        </el-form-item>
        <el-form-item label="勘察单位: ">
          {{ projectFrom.surveyUnit }}
        </el-form-item>
        <el-form-item label="设计单位: ">
          {{ projectFrom.designUnit }}
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      v-if="evaluationVisible"
      class="dialog_detail"
      :center="true"
      append-to-body
      :close-on-click-modal="false"
      width="1200px"
      title="合同阶段对供应商评价"
      lock-scroll
      :visible.sync="evaluationVisible"
    >
      <bidding-evaluation
        :bidid="contractId"
        :evaluateType="2"
        :bidEnterpriseId="bidCompanyId"
        @close="close"
      ></bidding-evaluation>
    </el-dialog>
  </div>
</template>

<script>
import BiddingEvaluation from '../../../../components/BiddingEvaluation.vue'
import ElementPagination from '../../../../components/ElementPagination.vue'
export default {
  data() {
    return {
      projectFrom: {},
      evaluationVisible: false,
      projectVisible: false,
      endPrice: '',
      marginPrice: '',
      searchQrcoUsed: '',
      searchPositionName: '',
      tableData: [],
      total: 0,
      size: 15,
      page: 1,
      enterpriseType: localStorage.getItem('enterpriseType'),
      conVisible: false,
      contractId: null,
      bidCompanyId: null,
      contractObj: {},
      biddListTotal: []
    }
  },
  components: { ElementPagination, BiddingEvaluation },
  mounted() {
    this.getData()
  },
  filters: {
    contractFormFilter(val) {
      switch (val) {
        case 1:
          return '固定总价'
        case 2:
          return '固定单价'
        case 3:
          return '可调总价'
        case 4:
          return '可调单价'
        case 5:
          return '用户自定义'
        default:
          break
      }
    }
  },
  methods: {
    checkCompony(row) {
      const { bidCompanyId } = row
      if (bidCompanyId) {
        localStorage.setItem('supplierID', bidCompanyId)
        const { href } = this.$router.resolve({ name: 'SupplierDetail', query: { id: bidCompanyId } })

        window.open(href, '_blank')
      }
    },
    close() {
      this.evaluationVisible = false
    },
    // 查看工程详情
    checkProDetail(id) {
      this.projectFrom = {}
      this.$https({
        method: 'post',
        url: '/government/listProjectByProjectId?projectId=' + id
      })
        .then(res => {
          if (res.code === 0) {
            this.projectFrom = res.data
            this.projectVisible = true
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 7) {
        //指定坐标
        return 'background: #fff4f2'
      } else {
        return { padding: '0px', background: '#F2F3F7' }
      }
    },
    decimalChange(val, refName) {
      if (val) {
        // 校验保证金输入框
        if (!this.common.fieldTest('decimal', val)) {
          //清空
          this.$refs[refName].clear()
          this.$message.error('你输入的数字格式有误或太小，最多输入小数点后4位')
        }
      }
    },
    sureBtn() {
      if (!this.marginPrice) {
        this.$message.error('请输入保证金退回金额')
        return false
      }
      this.$https({
        method: 'post',
        url: '/contract/applicationComplete',
        data: {
          id: this.contractId,
          acceptedAmount: this.endPrice,
          depositRefund: this.marginPrice
        }
      })
        .then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功')
            this.conVisible = false
            this.contractObj = {}
            this.contractId = null
            this.endPrice = ''
            this.marginPrice = ''
            this.biddListTotal = []
            this.getData()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    closeConDialog() {
      this.conVisible = false
      this.marginPrice = ''
    },
    closeDialog(done) {
      done()
    },
    handleClick(val, scope) {
      if (val === '查看') {
        if (scope.whetherToChange == 2) {
          this.$emit('checkContract', '查看历史', scope)
        } else {
          this.$emit('checkContract', '查看已生效', scope)
        }
      } else if (val === '申请变更/取消') {
        this.$emit('checkContract', '变更', scope, 'eff')
      } else if (val === '申请完成') {
        this.contractId = scope.id
        this.getContractList()
      } else {
        this.contractId = scope.id
        this.bidCompanyId = scope.bidCompanyId
        this.evaluationVisible = true
      }
    },
    getContractList() {
      this.$https({
        method: 'post',
        url: '/contract/queryContract',
        data: {
          id: this.contractId
        }
      })
        .then(res => {
          if (res.code === 0) {
            this.conVisible = true
            this.contractObj = res.data
            this.biddListTotal = [...(res.data.withinTheContract || []), ...(res.data.outsideTheContract || [])]
            let price = 0
            this.biddListTotal.forEach(element => {
              price = price + element.quantityReceived * element.unitPrice
            })
            this.endPrice = price
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getDataChange() {},
    getPagChange(data) {
      this.page = data.currentPage
      this.size = data.pagesize
      this.getData()
    },
    getData() {
      this.$https({
        method: 'post',
        url: '/contract/queryContractList',
        data: {
          page: this.page,
          size: this.size,
          state: 1
        }
      })
        .then(res => {
          if (res.code === 0) {
            this.total = res.data.total
            this.tableData = res.data.records
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    sortChange() {},
    addIndex(index) {
      return index + 1 + (this.page - 1) * this.size
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    }
  }
}
</script>
<style lang="less" scoped>
#effective {
  height: 100%;
  .tables {
    height: calc(100% - 62px);
  }
}
.footer {
  text-align: center;
  margin-top: 29px;
}
.xg {
  color: #166df1;
}
.ty {
  color: #ff3d3d;
}
.commonFrom {
  margin-top: 7px;
  width: 88%;
  .el-form-item {
    width: 40% !important;
    margin-bottom: 7px !important;
  }
  .form-item {
    width: 100% !important;
    /deep/.el-form-item__content {
      display: flex;
    }
    .el-input {
      width: 260px;
    }
  }

  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
h1 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-weight: normal;
    color: #999;
  }
}
</style>
